<!DOCTYPE html>
<html>
  <head>

    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/semantic-ui/2.0.7/semantic.min.css">
    <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/google/code-prettify/master/src/prettify.css">
    <link rel="stylesheet" type="text/css" href="../examples.css">

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://cdn.jsdelivr.net/semantic-ui/2.0.7/semantic.min.js"></script>
    <script src="angular.min.js"></script>
    <script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>

    <script src="../sm-core.js"></script>
    <script src="../sm-addons.js"></script>
    <script src="sm-search.js"></script>

    <script>
      angular.module('semantic-ui')
        .controller('MainController', function($scope)
        {
          $scope.remoteSearch = 'http://api.semantic-ui.com/search/{query}';
          $scope.remoteCategories = 'http://api.semantic-ui.com/search/category/{query}';

          $scope.localValues = [
            { title: 'Andorra' },
            { title: 'United Arab Emirates' },
            { title: 'Afghanistan' },
            { title: 'Antigua' },
            { title: 'Anguilla' },
            { title: 'Albania' },
            { title: 'Armenia' },
            { title: 'Netherlands Antilles' },
            { title: 'Angola' },
            { title: 'Argentina' },
            { title: 'American Samoa' },
            { title: 'Austria' },
            { title: 'Australia' },
            { title: 'Aruba' },
            { title: 'Aland Islands' },
            { title: 'Azerbaijan' },
            { title: 'Bosnia' },
            { title: 'Barbados' },
            { title: 'Bangladesh' },
            { title: 'Belgium' },
            { title: 'Burkina Faso' },
            { title: 'Bulgaria' },
            { title: 'Bahrain' },
            { title: 'Burundi' },
            { title: 'Benin' },
            { title: 'Bermuda' },
            { title: 'Brunei' },
            { title: 'Bolivia' },
            { title: 'Brazil' },
            { title: 'Bahamas' },
            { title: 'Bhutan' },
            { title: 'Bouvet Island' },
            { title: 'Botswana' },
            { title: 'Belarus' },
            { title: 'Belize' },
            { title: 'Canada' },
            { title: 'Cocos Islands' },
            { title: 'Congo' },
            { title: 'Central African Republic' },
            { title: 'Congo Brazzaville' },
            { title: 'Switzerland' },
            { title: 'Cote Divoire' },
            { title: 'Cook Islands' },
            { title: 'Chile' },
            { title: 'Cameroon' },
            { title: 'China' },
            { title: 'Colombia' },
            { title: 'Costa Rica' },
            { title: 'Serbia' },
            { title: 'Cuba' },
            { title: 'Cape Verde' },
            { title: 'Christmas Island' },
            { title: 'Cyprus' },
            { title: 'Czech Republic' },
            { title: 'Germany' },
            { title: 'Djibouti' },
            { title: 'Denmark' },
            { title: 'Dominica' },
            { title: 'Dominican Republic' },
            { title: 'Algeria' },
            { title: 'Ecuador' },
            { title: 'Estonia' },
            { title: 'Egypt' },
            { title: 'Western Sahara' },
            { title: 'Eritrea' },
            { title: 'Spain' },
            { title: 'Ethiopia' },
            { title: 'European Union' },
            { title: 'Finland' },
            { title: 'Fiji' },
            { title: 'Falkland Islands' },
            { title: 'Micronesia' },
            { title: 'Faroe Islands' },
            { title: 'France' },
            { title: 'Gabon' },
            { title: 'England' },
            { title: 'Grenada' },
            { title: 'Georgia' },
            { title: 'French Guiana' },
            { title: 'Ghana' },
            { title: 'Gibraltar' },
            { title: 'Greenland' },
            { title: 'Gambia' },
            { title: 'Guinea' },
            { title: 'Guadeloupe' },
            { title: 'Equatorial Guinea' },
            { title: 'Greece' },
            { title: 'Sandwich Islands' },
            { title: 'Guatemala' },
            { title: 'Guam' },
            { title: 'Guinea-Bissau' },
            { title: 'Guyana' },
            { title: 'Hong Kong' },
            { title: 'Heard Island' },
            { title: 'Honduras' },
            { title: 'Croatia' },
            { title: 'Haiti' },
            { title: 'Hungary' },
            { title: 'Indonesia' },
            { title: 'Ireland' },
            { title: 'Israel' },
            { title: 'India' },
            { title: 'Indian Ocean Territory' },
            { title: 'Iraq' },
            { title: 'Iran' },
            { title: 'Iceland' },
            { title: 'Italy' },
            { title: 'Jamaica' },
            { title: 'Jordan' },
            { title: 'Japan' },
            { title: 'Kenya' },
            { title: 'Kyrgyzstan' },
            { title: 'Cambodia' },
            { title: 'Kiribati' },
            { title: 'Comoros' },
            { title: 'Saint Kitts and Nevis' },
            { title: 'North Korea' },
            { title: 'South Korea' },
            { title: 'Kuwait' },
            { title: 'Cayman Islands' },
            { title: 'Kazakhstan' },
            { title: 'Laos' },
            { title: 'Lebanon' },
            { title: 'Saint Lucia' },
            { title: 'Liechtenstein' },
            { title: 'Sri Lanka' },
            { title: 'Liberia' },
            { title: 'Lesotho' },
            { title: 'Lithuania' },
            { title: 'Luxembourg' },
            { title: 'Latvia' },
            { title: 'Libya' },
            { title: 'Morocco' },
            { title: 'Monaco' },
            { title: 'Moldova' },
            { title: 'Montenegro' },
            { title: 'Madagascar' },
            { title: 'Marshall Islands' },
            { title: 'MacEdonia' },
            { title: 'Mali' },
            { title: 'Burma' },
            { title: 'Mongolia' },
            { title: 'MacAu' },
            { title: 'Northern Mariana Islands' },
            { title: 'Martinique' },
            { title: 'Mauritania' },
            { title: 'Montserrat' },
            { title: 'Malta' },
            { title: 'Mauritius' },
            { title: 'Maldives' },
            { title: 'Malawi' },
            { title: 'Mexico' },
            { title: 'Malaysia' },
            { title: 'Mozambique' },
            { title: 'Namibia' },
            { title: 'New Caledonia' },
            { title: 'Niger' },
            { title: 'Norfolk Island' },
            { title: 'Nigeria' },
            { title: 'Nicaragua' },
            { title: 'Netherlands' },
            { title: 'Norway' },
            { title: 'Nepal' },
            { title: 'Nauru' },
            { title: 'Niue' },
            { title: 'New Zealand' },
            { title: 'Oman' },
            { title: 'Panama' },
            { title: 'Peru' },
            { title: 'French Polynesia' },
            { title: 'New Guinea' },
            { title: 'Philippines' },
            { title: 'Pakistan' },
            { title: 'Poland' },
            { title: 'Saint Pierre' },
            { title: 'Pitcairn Islands' },
            { title: 'Puerto Rico' },
            { title: 'Palestine' },
            { title: 'Portugal' },
            { title: 'Palau' },
            { title: 'Paraguay' },
            { title: 'Qatar' },
            { title: 'Reunion' },
            { title: 'Romania' },
            { title: 'Serbia' },
            { title: 'Russia' },
            { title: 'Rwanda' },
            { title: 'Saudi Arabia' },
            { title: 'Solomon Islands' },
            { title: 'Seychelles' },
            { title: 'Sudan' },
            { title: 'Sweden' },
            { title: 'Singapore' },
            { title: 'Saint Helena' },
            { title: 'Slovenia' },
            { title: 'Svalbard, I Flag Jan Mayen' },
            { title: 'Slovakia' },
            { title: 'Sierra Leone' },
            { title: 'San Marino' },
            { title: 'Senegal' },
            { title: 'Somalia' },
            { title: 'Suriname' },
            { title: 'Sao Tome' },
            { title: 'El Salvador' },
            { title: 'Syria' },
            { title: 'Swaziland' },
            { title: 'Caicos Islands' },
            { title: 'Chad' },
            { title: 'French Territories' },
            { title: 'Togo' },
            { title: 'Thailand' },
            { title: 'Tajikistan' },
            { title: 'Tokelau' },
            { title: 'Timorleste' },
            { title: 'Turkmenistan' },
            { title: 'Tunisia' },
            { title: 'Tonga' },
            { title: 'Turkey' },
            { title: 'Trinidad' },
            { title: 'Tuvalu' },
            { title: 'Taiwan' },
            { title: 'Tanzania' },
            { title: 'Ukraine' },
            { title: 'Uganda' },
            { title: 'Us Minor Islands' },
            { title: 'United States' },
            { title: 'Uruguay' },
            { title: 'Uzbekistan' },
            { title: 'Vatican City' },
            { title: 'Saint Vincent' },
            { title: 'Venezuela' },
            { title: 'British Virgin Islands' },
            { title: 'Us Virgin Islands' },
            { title: 'Vietnam' },
            { title: 'Vanuatu' },
            { title: 'Wallis and Futuna' },
            { title: 'Samoa' },
            { title: 'Yemen' },
            { title: 'Mayotte' },
            { title: 'South Africa' },
            { title: 'Zambia' },
            { title: 'Zimbabwe' }
          ];

          $scope.model0 = null;
          $scope.model0Text = null;
          $scope.model1 = null;
          $scope.model2 = null;
          $scope.model3 = null;
          $scope.model4 = null;
        })
      ;
    </script>

  </head>
  <body ng-app="semantic-ui" ng-controller="MainController">

    <div class="ui container">

      <div class="ui segment">

        <h3 class="ui header">Standard</h3>

        <p>A search can display a set of results.</p>

        <div class="current value">
          {{ model0 }} - "{{ model0Text }}"
        </div>

        <div data-copy-to="#example0">
          <sm-search model="model0" text="model0Text" remote="{{ remoteSearch }}" placeholder="Common passwords..."></sm-search>
        </div>

        <pre class="ui segment prettyprint lang-html" id="example0"></pre>

      </div>

      <div class="ui segment">

        <h3 class="ui header">Icon</h3>

        <p>A search can have an icon.</p>

        <div class="current value">
          {{ model1 }}
        </div>

        <div data-copy-to="#example1">
          <sm-search model="model1" remote="{{ remoteSearch }}" placeholder="Common passwords..." icon="search"></sm-search>
        </div>

        <pre class="ui segment prettyprint lang-html" id="example1"></pre>

      </div>
      <div class="ui segment">

        <h3 class="ui header">Category</h3>

        <p>A search can display results from remote content ordered by categories.</p>

        <div class="current value">
          {{ model2 }}
        </div>

        <div data-copy-to="#example2">
          <sm-search model="model2" category="true" remote="{{ remoteCategories }}" placeholder="Search animals..." icon="search"></sm-search>
        </div>

        <pre class="ui segment prettyprint lang-html" id="example2"></pre>

      </div>
      <div class="ui segment">

        <h3 class="ui header">Local Search</h3>

        <p>A search can look for results inside static local content.</p>

        <div class="current value">
          {{ model3 }}
        </div>

        <div data-copy-to="#example3">
          <sm-search model="model3" local="localValues" placeholder="Search countries..." icon="search"></sm-search>
        </div>

        <pre class="ui segment prettyprint lang-html" id="example3"></pre>

      </div>

    </div>

    <script src="../examples.js"></script>

  </body>
</html>